<script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive, ref, computed } from "vue";
import {
  getGoods, 
} from '../../apis/product';
import type { shopRuleParams, shopEnterpriseListData ,Enterprise ,ArtFormData } from '../../types/shop';
import type { ServiceResponse } from '../../utils/reuqest';
const payTime = ref<string[]>([]); 
const artFrom = ref<ArtFormData>({
        page: 1,
        limit: 10,
        is_vip:'',
        create_range: "",
        store_name: "",

        cate_id: "",
        type: "",
        excel: "",
        supplier_id: "",
        store_id:"",
        brand_id:[],
        store_label_id:[],
        field_key: 'all',
        product_type:'',
        delivery_type:'',
        spec_type:'',
        sales_range:'',
        price_range:'',
        stock_range:'',
        collect_range:''
      })

      const isMobile = ref(false);
      const storeLabelShow = ref(false);
      const formRef = ref();
      const stockStart = ref(null);
      const stockEnd = ref(null);
      const salesStart = ref(null);
      const salesEnd = ref(null);
      const priceStart = ref(null);
      const priceEnd = ref(null);
      const collectStart = ref(null);
      const collectEnd = ref(null);
      const collapse = ref(false);
      const loading = ref(false);
      const shopList = ref<Enterprise[]>([]);
      const total = ref(0);

      // 工具函数：过滤空值参数
      const filterEmptyParams = (params: Record<string, any>): Record<string, any> => {
        const result: Record<string, any> = {};
        
        Object.keys(params).forEach(key => {
          const value = params[key];
          
          // 定义空值条件
          const isEmpty = 
            value === '' || 
            value === null || 
            value === undefined || 
            (Array.isArray(value) && value.length === 0);
          
          if (!isEmpty) {
            result[key] = value;
          }
        });
        
        return result;
      };
      
      const reset =  () => { 

        // artFrom.value.create_range = '';
        // payTime.value = ['',''];
        payTime.value =  [];
        artFrom.value.create_range  = '';
        formRef.value?.resetFields();
        getDataList();
      }

      const labelPosition = computed(() => (isMobile.value ? "top" : "right"));

      const updateIsMobile = () => {
        try {
          isMobile.value = window.innerWidth < 992;
        } catch (e) {
          isMobile.value = false;
        }
      };

      onMounted(() => {
        updateIsMobile();
        window.addEventListener('resize', updateIsMobile);
      });

      onBeforeUnmount(() => {
        window.removeEventListener('resize', updateIsMobile);
      });

     // 表格搜索
     const userSearchs =  () => {  

      console.log('payTime.value,',payTime.value);

      artFrom.value.create_range = payTime.value.length? payTime.value.join(' - '):'';
      allReset();
      artFrom.value.page = 1;
      // formSelection = [];
       getDataList();
    }

    const allReset =  () => {  
		// isAll = 0;
		// isCheckBox = false;
		// //$refs.xTable.setAllCheckboxRow(false);
		// checkUidList = [];
	  }

    const openGoodsLabel = () =>{
      storeLabelShow.value = true;
      //$refs.storeLabel.storeLabel(JSON.parse(JSON.stringify(goodsDataLabel)));
      //isLabel = 1;
    }

    // 商品列表；
    const getDataList = () => {
      loading.value = true;
      // const query: shopRuleParams = { 
      //   page: artFrom.value.page, 
      //   limit: artFrom.value.limit,
      //   create_range: artFrom.value.create_range,
      //   store_name : artFrom.value.store_name,
      // };
      const filteredParams = filterEmptyParams(artFrom.value);
      getGoods(filteredParams as ArtFormData)
        .then((res: ServiceResponse<shopEnterpriseListData>) => {
          const data = res.data;
          // 保存列表
          shopList.value = data.list;
          // 保存总数
          total.value = data.count;
        })
        .catch((err: unknown) => {
          console.error('getGoods error:', err);
        })
        .finally(() => {
          loading.value = false;
        });
    }

    function formatCardStatus(row: { is_show: number }) {
           return row.is_show === 0 ? "未上架" : "已上架";
     }      
    
      onMounted(() => {
        getDataList();
      });


</script>

<template>
  <div class="article-manager">

    <el-card :bordered="false" dis-hover class="ivu-mt" :padding="0">
      <div class="new_card_pd">
        <!-- 条件筛选 -->
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form
              ref="formRef"
              inline
              :model="artFrom"
              :label-width="96"
              :label-position="labelPosition"
              @submit.prevent
              class="filter-form"
            >
              <el-form-item label="商品搜索5555：" label-for="store_name" prop="store_name">

          <el-input
                  v-model="artFrom.store_name"
                  placeholder="请输1入"
                  element-id="name"
                  clearable
                  class="input-add"
                  maxlength="20"
                />


                <el-select v-model="artFrom.field_key" style="width: 120px;" clearable>
                <el-option
                  value="all"
                  label="全部"
                  default-label="全部"
                />
                <el-option
                  value="product_id"
                  label="商品ID"
                  default-label="商品ID"
                />
                 </el-select>

                <el-input
                  v-model="artFrom.store_name"
                  placeholder="请输入"
                  element-id="name"
                  clearable
                  class="input-add"
                  maxlength="20"
                />

                  <!-- <Select
                    v-model="artFrom.field_key"
                    slot="prepend"
                    style="width: 80px"
                    default-label="全部"
                  >

                    <Option value="all">全部</Option>
                    <Option value="product_id">商品ID</Option>
                    <Option value="store_name">商品名称</Option>
                    <Option value="keyword">关键字</Option>
                    <Option value="code">商品编码</Option>
                    <Option value="bar_code">商品条形码</Option>
                  </Select> -->
                
              </el-form-item>
              <!-- <el-form-item label="商品类型：" prop="product_type" label-for="product_type">
                <Select
                    v-model="artFrom.product_type"
                    @on-change="userSearchs"
                    clearable
                    class="input-add"
                >
                  <Option
                      v-for="item in productType"
                      :value="item.id"
                      :key="item.id"
                  >{{ item.name }}</Option
                  >
                </Select>
              </el-form-item> -->
              <div v-show="collapse">
              <!-- <el-form-item label="商品分类：" prop="cate_id">
                <el-cascader
                    placeholder="请选择商品分类"
                    class="input-add"
                    size="mini"
                    v-model="artFrom.cate_id"
                    :options="data1"
                    :props="props"
                    @change="userSearchs"
                    filterable
                    clearable
                >
                </el-cascader>
              </el-form-item> -->
              <!-- <el-form-item label="商品品牌：" prop="brand_id">
                <Cascader
                    :data="brandData"
                    placeholder="请选择商品品牌"
                    change-on-select
                    v-model="artFrom.brand_id"
                    filterable
                    class="input-add"
                    @on-change="userSearchs"
                ></Cascader>
              </el-form-item> -->
              <el-form-item label="配送方式：" prop="delivery_type">
                <el-select v-model="artFrom.delivery_type" clearable  @on-change="userSearchs"  class="input-add">
                <el-option
                  value="all"
                  label="全部"
                  default-label="全部"
                />
                <el-option
                  value="1"
                  label="快递"
                  default-label="快递"
                />
                <el-option
                  value="2"
                  label="到店核销"
                  default-label="到店核销"
                />
                <el-option
                  value="3"
                  label="门店配送"
                  default-label="门店配送"
                />
                 </el-select>
<!-- 
                <Select
                  v-model="artFrom.delivery_type"
                  class="input-add"
                  clearable
                  @on-change="userSearchs"
                >
                  <Option value="1">快递</Option>
                  <Option value="2">到店核销</Option>
                <Option value="3">门店配送</Option>
                </Select> -->
              </el-form-item>
              <!-- <el-form-item label="商品规格：" prop="spec_type">
                <Select
                  v-model="artFrom.spec_type"
                  class="input-add"
                  clearable
                  @on-change="userSearchs"
                >
                  <Option value="0">单规格</Option>
                  <Option value="1">多规格</Option>
                </Select>
              </el-form-item> -->
              <!-- <el-form-item label="商品标签：" prop="store_label_id" class="labelClass">
                <div class="acea-row row-middle mr14">
                  <div class="labelInput acea-row row-between-wrapper" @click="openGoodsLabel">
                    <div style="width: 90%;">
                      <div v-if="goodsDataLabel.length">
                        <Tag closable v-for="(item,index) in goodsDataLabel" :key="index" @on-close="closeStoreLabel(item)">{{item.label_name}}</Tag>
                      </div>
                      <span class="span" v-else>选择商品标签</span>
                    </div>
                    <div class="iconfont iconxiayi"></div>
                  </div>
                </div>
              </el-form-item> -->
              <el-form-item label="付费会员：" prop="is_vip">
                 <el-select v-model="artFrom.is_vip" clearable  @on-change="userSearchs"  class="input-add">
                <el-option
                  value=""
                  label="请选择"
                  default-label="请选择"
                />
                <el-option
                  value="0"
                  label="未开启"
                  default-label="未开启"
                />
                <el-option
                  value="1"
                  label="开启"
                  default-label="开启"
                />
                 </el-select>
              </el-form-item>
              <!-- <el-form-item label="选择门店：">
                <Select
                    v-model="artFrom.store_id"
                    clearable
                    filterable
                    @on-change="userSearchs"
                    class="input-add"
                >
                  <Option v-for="item in staffData" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
              </el-form-item> -->
              <!-- <el-form-item label="供应商：" prop="pid" label-for="pid">
                <Select
                    v-model="artFrom.supplier_id"
                    @on-change="userSearchs"
                    clearable
                    class="input-add"
                >
                  <Option
                      v-for="item in supplierList"
                      :value="item.id"
                      :key="item.id"
                  >{{ item.supplier_name }}</Option
                  >
                </Select>
              </el-form-item> -->
              <el-form-item label="有效日期" prop="payTime">
              <el-date-picker
                v-model="payTime"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
              </el-form-item>
              <!-- <el-form-item label="创建时间：">
                <DatePicker
                  :editable="false"
                  :clearable="true"
                  @on-change="onchangeTime"
                  :value="timeVal"
                  format="yyyy/MM/dd HH:mm:ss"
                  type="datetimerange"
                  placement="bottom-start"
                  placeholder="自定义时间"
                  class="input-add"
                  :options="options"
                ></DatePicker>
              </el-form-item> -->
              <el-form-item label="库存：" prop="stockStart">
              <el-input-number class="w-118 fs-12" placeholder='开始' :max="9999999999" :min="0" :precision='0' v-model="stockStart" />
              ~
              <el-input-number class="w-118 fs-12 mr14" placeholder='结尾' :max="9999999999" :min="0" :precision='0' v-model="stockEnd" />
              </el-form-item>
              <el-form-item label="销量：" prop="salesStart">
              <el-input-number class="w-118 fs-12" placeholder='开始' :max="9999999999" :min="0" :precision='0' v-model="salesStart" />
              ~
              <el-input-number class="w-118 fs-12 mr14" placeholder='结尾' :max="9999999999" :min="0" :precision='0' v-model="salesEnd" />
              </el-form-item>
              <el-form-item label="售价：" prop="priceStart">
                <el-input-number class="w-118 fs-12" placeholder='开始' :max="9999999999" :min="0" :precision='0' v-model="priceStart" />
                ~
                <el-input-number class="w-118 fs-12 mr14" placeholder='结尾' :max="9999999999" :min="0" :precision='0' v-model="priceEnd" />
              </el-form-item>
              <el-form-item label="收藏数：" prop="collectStart">
                <el-input-number class="w-118 fs-12" placeholder='开始' :max="9999999999" :min="0" :precision='0' v-model="collectStart" />
                ~
                <el-input-number class="w-118 fs-12 mr14" placeholder='结尾' :max="9999999999" :min="0" :precision='0' v-model="collectEnd" />
              </el-form-item>
              </div>
            </el-form>
          </el-col>
          <el-col :span="6">
            <div class="flex items-end justify-end h-full pb-20 filter-actions">
              <div>
                <el-button type="primary" @click="userSearchs">查询</el-button>
                <el-button @click="reset" class="ml10">重置</el-button>
                <a class="ivu-ml-8 collapse-toggle" @click="collapse = !collapse">
                  <template v-if="!collapse">
                    展开 <el-icon type="ios-arrow-down" />
                  </template>
                  <template v-else>
                    收起 <el-icon type="ios-arrow-up" />
                  </template>
                </a>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

     <!-- 新增删除操作区域 -->
     <div class="create-container">
      <el-button type="primary" @click="$router.push('/cardAdd')">
        添加商品
      </el-button>
      <el-button>批量删除</el-button>
    </div>

   

        <!-- 表格区域 -->
      <div class="table">
      <el-table style="width: 100%" :data="shopList">
        <el-table-column  prop="id" label="商品ID" width="100" />
        <!-- <el-table-column label="商品图" prop="personName" /> -->
        <el-table-column label="商品图" width="120">
          <!-- 作用域插槽 -->
          <template #default="{ row }">
            <img :src="row.image" style="width: 40px;height:40px"/>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="store_name" />
        <el-table-column label="商品来源" prop="plate_name" />
        <el-table-column label="商品类型" prop="cate_name" />
        <el-table-column label="商品售价" prop="price" />
        <!-- <el-table-column label="状态">
          <template #default="scope">
            {{ scope.row.cardStatus === 0 ? "可用" : "已过期" }}
          </template>
        </el-table-column> -->
        <el-table-column label="状态" :formatter="formatCardStatus" />
        <el-table-column label="操作" fixed="right" width="280">
          <!-- 作用域插槽 -->
          <template #default="{ row }">
            <el-button size="small" type="text">续费</el-button>
            <el-button size="small" type="text">查看</el-button>
            <el-button
              size="small"
              type="text"
              @click="$router.push({ path: '/cardAdd', query: { id: row.id } })"
            >
              编辑
            </el-button>
            <el-button size="small" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next, jumper, sizes"
        :total="total"
        v-model:current-page="artFrom.page"
        v-model:page-size="artFrom.limit"
        :page-sizes="[2, 5, 10]"
        @current-change="getDataList()"
        @size-change="getDataList()"
      />
    </div>

    <div style="height: 100px;"></div>

    





  </div>
</template>

<style lang="scss" scoped>
.page-container {
  padding: 15px 0px;
  text-align: right;
}
.create-container {
  margin: 20px 0px;
}
.article-manager{  
    padding: 20px;
    background-color: #fff;
  }

  .new_card_pd {
    padding: 16px 16px 8px;
  }

  .filter-form {
    .el-form-item {
      margin-right: 16px;
      margin-bottom: 12px;
    }
    .input-add {
      width: 220px;
    }
  }

  .filter-actions {
    padding-bottom: 8px;
    .collapse-toggle {
      cursor: pointer;
      color: #606266;
      font-size: 14px;
      margin-left: 10px;
    }
  }

  .productType {
  width: 120px;
  height: 60px;
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #E7E7E7;
  text-align: center;
  padding-top: 8px;
  position: relative;
  cursor: pointer;
  line-height: 23px;

  &.on{
	  border-color: #1890FF;
  }

  .name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }

  .title {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
  }

  .jiao {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 26px solid #1890FF;
    border-left: 26px solid transparent;
  }

  .iconfont {
    position: absolute;
    bottom: -3px;
    right: 1px;
    color: #FFFFFF;
	  font-size: 12px;
  }

}
.product-type-wrap {
  margin: 0 -12px -12px 0;
}








</style>
